<template>
  <div class="form">
     <div class="formTip">
      <van-image :src="img"></van-image>
      <p>请设置登录密码</p>
    </div>
    <van-field v-model="password" :type="type" placeholder="请输入登录密码" :right-icon="typeIcon" @click-right-icon="changeType"/>
    请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字
    <div class="my-button">
      <van-button :disabled="flag" color="#ff6666" block round @click="registerFn">完成</van-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Button, Image as VanImage, Toast } from 'vant'
import { doFinishRegister } from '@/utlis/user'
Vue.use(Field)
Vue.use(Button)
Vue.use(VanImage)
Vue.use(Toast)
export default {
  data () {
    return {
      type: 'password',
      typeIcon: 'closed-eye',
      img: '',
      password: ''
    }
  },
  computed: {
    flag () {
      if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    registerFn () {
      doFinishRegister({
        tel: localStorage.getItem('tel'),
        password: this.password
      }).then(res => {
        // 注册成功，告诉用户直接登录
        Toast('注册成功')
        this.$router.go(-3)
      })
    },
    changeType () {
      this.type = this.type === 'password' ? 'text' : 'password'
      this.typeIcon = this.type === 'password' ? 'closed-eye' : 'eye-o'
    }
  }
}
</script>
<style lang="stylus">
.form
  .formTip
    display flex
    height 200px
    flex-direction column
    justify-content center
    align-items center

  .my-button
    margin-top 30px
</style>